<template>
    <div class="table">
        <div class="content-common">
           <el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
				<el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>
				<el-col :span="6" style="text-align:right">
					<!-- <el-button type="primary" icon="plus" @click="handleAdd()">新增</el-button> -->

<!-- 					<el-button  type="primary" icon="plus" @click="handleAdd()">新增</el-button>-->					
<el-button  type="primary" icon="download" @click="downexcell">导出记录</el-button>
				</el-col>
           </el-row>
           

		   <div style="font-size:18px;text-align:center;font-weight:bold;padding-bottom:8px">
			{{topInfo.stnm}}站径流小区植被盖度/郁闭度计算表
		   </div>
		  <div>

			
			      
			<span style="margin-right:12px">观测日期: <span style="color:red">{{topInfo.obDate}}</span>  </span>
			
			
			<span style="margin-right:12px">计算人:<span style="color:red">{{topInfo.calculatorName}}</span></span>
			<span>审核人:<span style="color:red">{{topInfo.reviewerName}}</span></span>
		  </div>

			<div style="width:100%;overflow: auto;">
				<table style="width:100%" border="0px solid #ebeef5" cellpadding="0" cellspacing="0">
				   <thead>
						<tr>
							<!-- <th rowspan="2"></th> -->
							<th rowspan="2">小区号</th>
							<th rowspan="2">测次</th>
							<th rowspan="2">测点</th>
							<th colspan="2">相片编号</th>
							<th colspan="2">照相法</th>
							<th colspan="3">目估郁闭度/盖度</th>
							<th colspan="3">照相法/目估法平均</th>
							<th rowspan="2">植被平均高度(m)</th>
							<th rowspan="2">备注</th>
							<!-- <th rowspan="2" v-if="status==0">操作</th> -->
						</tr>
						<tr>
							<th>郁闭度 </th>
							<th>盖度 </th>
							<th>郁闭度 </th>
							<th>盖度 </th>
							<th>郁闭度 </th>
							<th>植物盖度(%) </th>
							<th>地面盖度(%) </th>
							<th>郁闭度 </th>
							<th>植物盖度(%) </th>
							<th>地面盖度(%) </th>
							
						</tr>
									
								
									
								</thead>
				    <tbody>
									<template v-for="(item,index) in tableData">
										<tr v-for="(iteminner,innerindex) in item.detailList" :key="String(innerindex)+String(index)">
											<!-- <td :rowspan="item.detailList.length" v-if="innerindex==0">
												 <el-checkbox @change="checked=>checkChange(checked, index)" v-model="iteminner.checked"></el-checkbox>
											</td> -->
										 	<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.areaCode}}</td> 
										 	<td>{{iteminner.frequency}}</td>
											<td>
												<span v-show="iteminner.point==1">坡上</span>
												<span v-show="iteminner.point==2">坡中</span>
												<span v-show="iteminner.point==3">坡下</span>
											</td>
										 	<td>{{iteminner.lushImgNo}}</td>
										 	<td>{{iteminner.coverageImgNo}}</td>
											<td>{{iteminner.photographLush}}</td> 
											
											<td>{{iteminner.photographCoverage}}</td>
											
											
											
											
											<td>{{iteminner.visualLush}}</td>
											<td>{{iteminner.visualCoverage}}</td>
											<td>{{iteminner.visualGroundCover}}</td>
											
											<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.avgLush}}</td>
											<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.avgCoverage}}</td> 
											<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.avgGroundCover}}</td>
											<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.avgHeight}}</td>
											
											<td>
											{{iteminner.remark}}</td>
											<!-- <td :rowspan="item.detailList.length" v-if="innerindex==0&&status==0" style="width:140px">
												<el-button type="primary"   @click="handleEdit(item.detailList)">编辑</el-button>
												<el-button type="danger"   @click="handleDelete(item.detailList)">删除</el-button>
											</td> -->
										 </tr>
									 </template>
									
				    
				    </tbody>   
				  </table>
			</div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="logTitle" v-model="editVisible" width="90%">
           <el-form :label-position="'right'" :inline="true" :model="query">
           	<el-form-item label="观测日期">
           	    <el-date-picker
				disabled
           		value-format="YYYY-MM-DD"
           		  v-model="query.obDate"
           		  type="date"
           		  range-separator="至"
           		 placeholder="观测日期">
           		</el-date-picker>
           	</el-form-item>
          <!-- 	<el-form-item label="">
           	   <el-button type="primary" icon="search" @click="getJisuanData()">查询</el-button>
			   
           	  </el-form-item> -->
           </el-form>
		   <div style="width:100%;overflow: auto;">
		   	<table style="width:100%" border="0px solid #ebeef5" cellpadding="0" cellspacing="0">
		   	   <thead>
		   			<tr>
						
		   				<th rowspan="2">小区号</th>
		   				<th rowspan="2">测次</th>
		   				<th rowspan="2">测点</th>
		   				<th colspan="2">相片编号</th>
		   				<th colspan="2">照相法</th>
		   				<th colspan="3">目估郁闭度/盖度</th>
		   				<th colspan="3">照相法/目估法平均</th>
		   				<th rowspan="2">植被平均高度(m)</th>
		   				<th rowspan="2">备注</th>
		   			</tr>
		   			<tr>
		   				<th>郁闭度 </th>
		   				<th>盖度 </th>
		   				<th>郁闭度 </th>
		   				<th>盖度 </th>
		   				<th>郁闭度 </th>
		   				<th>植物盖度(%) </th>
		   				<th>地面盖度(%) </th>
		   				<th>郁闭度 </th>
		   				<th>植物盖度(%) </th>
		   				<th>地面盖度(%) </th>
		   				
		   			</tr>
		   						
		   					
		   						
		   					</thead>
		   	    <tbody>
		   						<template v-for="(item,index) in cijiangyuData">
		   							<tr v-for="(iteminner,innerindex) in item.detailList" :key="String(innerindex)+String(index)">
		   							 	<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.areaCode}}</td> 
		   							 	<td>{{iteminner.frequency}}</td>
		   							 	<td>
											<span v-show="iteminner.point==1">坡上</span>
											<span v-show="iteminner.point==2">坡中</span>
											<span v-show="iteminner.point==3">坡下</span>
										</td>
		   							 	<td>{{iteminner.lushImgNo}}</td>
		   								<td>{{iteminner.coverageImgNo}}</td> 
		   								
		   								<td><el-input style="width:80px" v-model="iteminner.photographLush" ></el-input></td>
		   								
		   								<td><el-input style="width:80px" v-model="iteminner.photographCoverage" ></el-input></td>
		   								<td>{{iteminner.visualLush}}</td>
		   								<td>{{iteminner.visualCoverage}}</td>
		   								<td>{{iteminner.visualGroundCover}}</td>
		   								
		   								<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.avgLush}}</td>
		   								<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.avgCoverage}}</td> 
		   								<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.avgGroundCover}}</td>
		   								<td :rowspan="item.detailList.length" v-if="innerindex==0">{{iteminner.avgHeight}}</td>
		   								
		   								<td><el-input style="width:80px" v-model="iteminner.remark" ></el-input></td>
		   							 </tr>
		   						 </template>
		   						
		   	    
		   	    </tbody>   
		   	  </table>
		   </div>  

		   <template #footer>
                <span  class="dialog-footer">
               
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
            </template>
          
        </el-dialog>

    </div>
</template>

<script>


import { calculatecoveragesaveaddDetail,calculatecoverageviewlistRecordDetail,calculaterainfallsaveaddDetail,
reportfieldManageeditdoApprove,reportfieldManageeditrevokeRecord,reportfieldManageeditsubmitRecord,
rainfallImportRainfallDaily,calculatecoverageviewlistDetail,
soilWaterrunoffFieldcalculatecoverageremovedelDetail } from '../../../api/index';
import moment from 'moment'
export default {
    name: 'jisuanzhibeiyubidu',
    data() {
        return {
			topInfo:{},
			status:'/',
			jiangyuAllData:[],
			bianjiData:[],
			selIndex:[],
			cijiangyuData:[],
			shenpilog:false,
			globalUser:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
               obDate:this.$route.query.obDate 
            },
			excelllog:false,
            formInline: {},
            tableData: [],
           
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
               
            },
			seldata:[],
			checkArr:[],
			tijiaoform:{
				
			},
			selnow:null,
			jiangyuguochengData:[]
        };
    },
    created() {
		this.topInfo={
			obDate:moment(this.$route.query.obDate).format("YYYY年M月D日H时"),
			calculatorName:this.$route.query.calculatorName,
			reviewerName:this.$route.query.reviewerName,
			stnm:this.$route.query.stnm
		}
		this.status=this.$route.query.status
		this.globalUser=globalUser
        let that = this;
        //that.getData();
		this.getJisuanData()
		
    },
    methods: {
		downexcell(){
			let stcd=this.$route.query.stcd
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/calculate/coverage/export/exportData?year='+globalyear+'&stcd='+stcd
		},
		prepage(){
			this.$router.go(-1);
		},
		checkChange(ison,index){
			if(ison){
				this.selIndex.push(index)
			}else{
				var valindex = this.selIndex.indexOf(index); 
				if (valindex > -1) { 
				this.selIndex.splice(valindex, 1); 
				} 
			}
			console.log(this.selIndex)
			
		},
		getJisuanData(){
			let that=this
			calculatecoverageviewlistRecordDetail({
				stcd:that.$route.query.stcd,
				obDate:that.$route.query.obDate
			}).then(e=>{
				let arr=e.object.map(item=>{
					return item.areaCode
				})
				let codeArr=[...new Set(arr)]
				
				let nishaData=[]
				for(let j=0;j<codeArr.length;j++){
					let obj={
						areaCode:codeArr[j],
						detailList:[]
					}
					for(let i=0;i<e.object.length;i++){
						if(e.object[i].areaCode==codeArr[j]){
							
							obj.detailList.push(e.object[i])
						}
						
					}
					nishaData.push(obj)
				}
				
				
				for(let i=0;i<nishaData.length;i++){
					let avgGroundCover=0;
					let avgCoverage=0;
					let avgLush=0;
					for(let j=0;j<nishaData[i].detailList.length;j++){
						
						avgLush+=Number(nishaData[i].detailList[j].visualLush)?Number(nishaData[i].detailList[j].visualLush):0
						avgCoverage+=Number(nishaData[i].detailList[j].visualCoverage)?Number(nishaData[i].detailList[j].visualCoverage):0
						avgGroundCover+=Number(nishaData[i].detailList[j].visualGroundCover)?Number(nishaData[i].detailList[j].visualGroundCover):0
					}
					
					nishaData[i].detailList[0].avgLush=(avgLush/3).toFixed(2)
					nishaData[i].detailList[0].avgCoverage=(avgCoverage/3).toFixed(2)
					nishaData[i].detailList[0].avgGroundCover=(avgGroundCover/3).toFixed(2)
				}
				
				//console.log(avgLush,'avgLushavgLushavgLush')
				
				// for(let i=0;i<nishaData.length;i++){
					
					
				// 	for(let j=0;j<nishaData[i].detailList.length;j++){
						
						
				// 		nishaData[i].detailList[j].avgLush=(avgLush/3).toFixed(2)
				// 		nishaData[i].detailList[j].avgCoverage=(avgCoverage/3).toFixed(2)
				// 		nishaData[i].detailList[j].avgGroundCover=(avgGroundCover/3).toFixed(2)
				// 	}
					
					
				// }
				that.jiangyuAllData=nishaData
				that.handleAdd()
				
			}).catch(err=>{
				console.log(err)
			})
		},
		tianjiamingxi(){
			
			let that=this
			calculaterainfallsaveaddDetail(that.jiangyuguochengData).then(e=>{
				that.shenpilog=false
				
			}).catch(e=>{
				console.log(err)
			})
		},
		quedingtijiao(){
			this.tijiaoform.relatedNo=this.selnow.recordNo
			let that=this
			reportfieldManageeditdoApprove(that.tijiaoform).then(e=>{
				that.$message.success('操作成功');
				that.shenpilog=false
			}).catch(e=>{
				console.log(err)
			})
		},
		
		shenpi(item){
			this.shenpilog=true
			this.selnow=item
			
		},

		daorujiangyu(){
			let that=this
			rainfallImportRainfallDaily(that.form).then(e=>{
				console.log(e)
			}).catch(err=>{
				console.log(err)
			})
		},
      
        getData() {
			let data={
				headNo:this.$route.query.recordNo,
				

			}
			let that=this
            calculatecoverageviewlistDetail(data).then((e) => {
				
				
               let arr=e.object.map(item=>{
               	return item.areaCode
               })
               let codeArr=[...new Set(arr)]
               
               let nishaData=[]
               for(let j=0;j<codeArr.length;j++){
               	let obj={
               		areaCode:codeArr[j],
               		detailList:[]
               	}
               	for(let i=0;i<e.object.length;i++){
               		if(e.object[i].areaCode==codeArr[j]){
               			obj.detailList.push(e.object[i])
               		}
               		
               	}
               	nishaData.push(obj)
               }
               
               that.tableData=nishaData
                
               
                
            });
        },
        // 触发搜索按钮
        handleSearch() {
           
            this.getData();
        },
        // 删除操作
        handleDelete(row) {
			// if(this.selIndex.length==0){
			// 	this.$message({
			// 	  message: '未选择删除项',
			// 	  type: 'warning'
			// 	});
			// 	return
			// }
			// let data=[]
			// for(let j=0;j<this.selIndex.length;j++){
			// 	data=data.concat(this.tableData[this.selIndex[j]].detailList)
			// }
			
			
			
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    soilWaterrunoffFieldcalculatecoverageremovedelDetail(row.map(item=>{return item.detailNo})).then((e) => {
                        this.$message.success('删除成功');
                        this.getData();
                    });
                })
                .catch(() => {});
        },
		chehui(row){
			
			this.$confirm('确定撤回吗？', '提示', {
			    type: 'warning'
			})
			    .then(() => {
					
					
					reportfieldManageeditrevokeRecord({
						headNo:row.recordNo
					}).then(e=>{
						
						this.getData();
					}).catch(err=>{
						console.log(err)
					})
			       
			    })
			    .catch(() => {});
		},
        tijiao(row){
			
			this.$confirm('确定提交吗？', '提示', {
			    type: 'warning'
			})
			    .then(() => {
					
					
					reportfieldManageeditsubmitRecord({
						headNo:row.recordNo
					}).then(e=>{
						
						this.getData();
					}).catch(err=>{
						console.log(err)
					})
			       
			    })
			    .catch(() => {});
			
		},
        // 编辑操作
        handleEdit(row) {
			
           let obj={
			   detailList:row,
			   areaCode:row[0].areaCode
		   }
		   let nishaData=JSON.parse(JSON.stringify([obj]))
		   for(let i=0;i<nishaData.length;i++){
		   	let avgGroundCover=0;
		   	let avgCoverage=0;
		   	let avgLush=0;
		   	
		   	for(let j=0;j<nishaData[i].detailList.length;j++){
		   		avgLush+=Number(nishaData[i].detailList[j].lushImgNo)?Number(nishaData[i].detailList[j].lushImgNo):0
		   		avgCoverage+=Number(nishaData[i].detailList[j].avgCoverage)?Number(nishaData[i].detailList[j].avgCoverage):0
		   		avgGroundCover+=Number(nishaData[i].detailList[j].avgGroundCover)?Number(nishaData[i].detailList[j].avgGroundCover):0
		   	}
		   	for(let j=0;j<nishaData[i].detailList.length;j++){
		   		
		   		nishaData[i].detailList[j].lushImgNo=nishaData[i].detailList[j].imageLush
		   		nishaData[i].detailList[j].coverageImgNo=nishaData[i].detailList[j].imageCoverage
		   		nishaData[i].detailList[j].avgLush=(avgLush/3).toFixed(0)
		   		nishaData[i].detailList[j].avgCoverage=(avgCoverage/3).toFixed(0)
		   		nishaData[i].detailList[j].avgGroundCover=(avgGroundCover/3).toFixed(0)
		   	}
		   	
		   }
            this.cijiangyuData=nishaData
			
            this.logTitle = '郁闭度记录明细';
           
            this.editVisible = true;
        },
        handleAdd() {
			let nishaData=JSON.parse(JSON.stringify(this.jiangyuAllData))
			
			this.cijiangyuData=nishaData
			
            this.logTitle = '郁闭度记录明细';
            this.form = {
               year:moment().format('YYYY')
            };
			this.saveEdit()
            //this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
			let that=this
			let nishaData=this.cijiangyuData
			for(let i=0;i<nishaData.length;i++){
				
				
				
				for(let j=0;j<nishaData[i].detailList.length;j++){
					nishaData[i].detailList[j].headNo=that.$route.query.recordNo
					nishaData[i].detailList[j].visualGroundCover=nishaData[i].detailList[0].visualGroundCover
					nishaData[i].detailList[j].avgCoverage=nishaData[i].detailList[0].avgCoverage
					nishaData[i].detailList[j].avgGroundCover=nishaData[i].detailList[0].avgGroundCover
				}
				
			}
			
            
				let data=[]
				for(let i=0;i<nishaData.length;i++){
					data=data.concat(nishaData[i].detailList)
				}
              
                calculatecoveragesaveaddDetail(data).then((e) => {
                    this.editVisible = false;
                    //this.$message.success('操作成功');
                    this.getData();
                });
            
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}



 table{  line-height:25px;}
	    th{ border:1px solid #fff;background:#3f8cff ;color:#fff}
	    td{  text-align:center;border:1px solid #ebeef5} 
	    tr:hover{ background-color:#f5f7fa}
</style>

